import React, { useState, useRef } from 'react'

import {permits} from "./data"

export default function App() {
  const list = JSON.parse(JSON.stringify(permits))

  const menus = ()=>{
    const top = list.find(p=>p.parentId===0)
    generator(top, list)
    return <ul>{top.ui}</ul>
  }

  const generator= (p, list)=>{
    const children = list.filter(c=>c.parentId===p.id)
    if(children && children.length>0){
      const uis = []
      children.forEach(c => {
        generator(c, list)
        uis.push(c.ui)
      });
      p.ui = <li key={p.id}><a href="#">{p.name}</a><ul>{uis}</ul></li>
    }else{
      p.ui = <li key={p.id}><a href="#">{p.name}</a></li>
    }
  }

  return (
  <nav>
    {
      menus()
    }
  </nav> 
  )
}
